<template>
	<view class="changeBatteries">
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="true" indicator-color="rgba(255,255,255,0.5)"
				indicator-active-color="#ffffff" :autoplay="true" style="height: 512rpx;">
				<swiper-item v-for="(item, index) in banner" :key="index">
					<image style="width: 100%; height: 512rpx;" mode="scaleToFill" :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="tipsBox">
			<image src="../../static/img/index/tips.png" class="tipsBg" mode=""></image>
			<view class="title">归还流程</view>
		</view>
		<view class="processList">
			<view class="process">拆开浮板->取电池</view>
			<image src="../../static/img/index/down.png" class="down" mode=""></image>
			<view class="process">归还电池->关仓门</view>
			<!-- <image src="../../static/img/index/down.png" class="down" mode=""></image>
			<view class="process">归还浮板->关仓门</view> -->
		</view>
		<view class="bottonGround">
			<view class="button2" @click="getOutBattery(2)">还电池</view>
			<!-- <view class="button1" @click="returnTips">还浮板</view> -->
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="returnTips">
				<image src="../../static/img/active/popupBg.png" class="popupBg" mode=""></image>
				<view class="titleBox">
					<view class="close"></view>
					<view class="title">浮板归还提醒</view>
					<image src="../../static/img/index/close.png" @click="closeTips" class="close" mode=""></image>
				</view>
				<view class="returnProcess">
					<view class="processItem" v-for="(item,index) in returnProcess" :key="index">
						<view class="index">{{index+1}}</view>
						<view class="label">{{item}}</view>
					</view>
				</view>
				<view class="returnButton">
					<view class="button2" @click="closeTips">去还电池</view>
					<!-- v-if="isContinue" -->
					<!-- <view class="button1" v-if="waitSecond">继续 <text>({{waitSecond}})</text> </view> -->
					<view class="button1"  @click="getOutBattery(1)">继续</view>
				</view>
			</view>
		</uni-popup>
		<!-- 错误提示框-->
		<view class="mask" v-if="error">
			<view class="pay">
				<view class="tit">温馨提示</view>
				<view class="con" v-html="msg"></view>
				<view class="button">
					<button type="default" class="exit" @click="confirm">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ment,
	} from '../../api/api.js';
	import {
		getOutBattery,
	} from '../../api/equip.js';
	export default {
		data() {
			return {
				isContinue: true,
				continueIntVal: null,
				// waitSecond: 5,
				banner: [],
				error: false, //是否显示错误弹窗
				countDown: 5, //弹窗计数
				timer: null, //弹窗定时器
				msg: '', //弹窗错误信息
				type: 1, //归还类型 2电池 1浮板
				returnProcess: ['先还电池，后还浮板', '请确保电池已经归还']
			}
		},
		onLoad(options) {
			if (options && options.order_id) {
				this.order_id = options.order_id
			}
			this.getMent();
		},
		onHide() {
			clearInterval(this.continueIntVal)
		},
		methods: {
			confirm() {
				this.error = false;
				this.$refs.popup.close()
				// if(this.type == 1){
				// }
			},
			getOutBattery(type) {
				this.type = type
				getOutBattery({
					order_id: this.order_id,
					type: type
				}).then(res => {
					if (res.code == 1) {
						this.error = true;
						this.msg = `${type==2?'电池':'浮板'}：${res.data.item_code} 柜门已打开,请将${type==2?'电池':'浮板'}放入柜门`;
					}
				})
			},
			//打开归还提示
			returnTips() {
				let that = this
				// clearInterval(that.continueIntVal)
				this.$refs.popup.open('center')
				// this.waitSecond = 5
				// that.continueIntVal = setInterval(() => {
				// 	that.waitSecond--
				// 	if (that.waitSecond == 0) {
				// 		that.isContinue = false
				// 		clearInterval(that.continueIntVal)
				// 	}
				// }, 1000)
			},
			closeTips() {
				this.$refs.popup.close()
				this.waitSecond = 5
				this.isContinue = true
				clearInterval(this.continueIntVal)
			},
			getMent() {
				ment().then(res => {
					this.banner = res.data.banner;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.pay {
			width: 580rpx;
			min-height: 340rpx;
			padding: 10rpx 30rpx 30rpx;
			background: #ffffff;
			border-radius: 12px;
			position: relative;

			.tit {
				width: 100%;
				text-align: center;
				margin: 30rpx auto 30rpx;
			}

			.con {
				width: 80%;
				margin: 0 auto;
				color: #666;
				text-align: center;
			}

			.button {
				margin-top: 45rpx;
				display: flex;
				justify-content: center;

				button {
					width: 200rpx;
					height: 88rpx;
					line-height: 88rpx;
					background: #3eb9ff;
					border-radius: 44rpx;
					border: 1rpx solid #f2f2f2;
					color: #fff;
				}
			}
		}
	}

	.tipsBox {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 42rpx 0 44rpx;
		font-size: 32rpx;
		color: #1F90FE;

		.tipsBg {
			position: absolute;
			width: 496rpx;
			height: 36rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.processList {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.process {
			width: 694rpx;
			height: 84rpx;
			background: #EEF9FF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin: 0 auto;
			text-align: center;
			font-size: 32rpx;
			color: #1F90FE;
			line-height: 84rpx;
		}

		.down {
			margin: 10rpx auto;
			width: 26rpx;
			height: 34rpx;
		}
	}

	.bottonGround {
		width: 694rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.button1,
		.button2 {
			width: 100%;
			height: 100rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.button1 {
			background: #FF6E30;
		}

		.button2 {
			background: #3EB9FF;
		}
	}

	.returnTips {
		width: 650rpx;
		height: 520rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FFFFFF;
		background-color: #FFFFFF;
		position: relative;

		.popupBg {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.titleBox {
			position: relative;
			z-index: 1;
			height: 108rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				flex: 1;
				text-align: center;
			}

			.close {
				width: 27rpx;
				height: 27rpx;
				margin: 0 38rpx;
			}
		}

		.returnProcess {
			margin: 0 auto 32rpx;
			position: relative;
			z-index: 1;

			.processItem {
				height: 114rpx;
				display: flex;
				align-items: center;
				padding: 0 40rpx;

				.index {
					width: 48rpx;
					height: 48rpx;
					background: #3EB9FF;
					border-radius: 50%;
					line-height: 48rpx;
					text-align: center;
					color: #ffffff;
				}

				.label {
					margin-left: 10rpx;
					font-size: 32rpx;
					color: #666666;
				}
			}
		}

		.returnButton {
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			z-index: 1;

			.button1,
			.button2 {
				width: 270rpx;
				height: 100rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}

			.button1 {
				// background: #FF6E30;
				background: #3EB9FF;
			}

			.button2 {
				background: #C2C2C2;
			}

			// .active {
			// 	background: #3EB9FF;
			// }
		}
	}
</style>